import React, { Component } from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Icon from 'react-native-vector-icons/FontAwesome';
import HomeScreen from './Home';
import ProfileScreen from './Profile';
import NativeBaseScreen from './NativeBase';
const deviceW = Dimensions.get('window').width;

const basePx = 375;

function px2dp(px) {
  return px * deviceW / basePx;
}

export default class BottomTab extends Component {
  state = {
    selectedTab : 'home'
  };

  render() {
    const { navigation } = this.props;
    return (
      <TabNavigator style={styles.container}>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'home'}
          title='Home'
          selectedTitleStyle={{ color: '#3496f0' }}
          renderIcon={() => <Icon name='home' size={px2dp(22)} color='#666' />}
          renderSelectedIcon={() => <Icon name='home' size={px2dp(22)} color='#3496f0' />}
          badgeText='1'
          onPress={() => this.setState({ selectedTab: 'home' })}
        >
          <HomeScreen navigation={navigation} />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'profile'}
          title='Profile'
          selectedTitleStyle={{ color: '#3496f0' }}
          renderIcon={() => <Icon name='user' size={px2dp(22)} color='#666' />}
          renderSelectedIcon={() => <Icon name='user' size={px2dp(22)} color='#3496f0' />}
          onPress={() => this.setState({ selectedTab: 'profile' })}
        >
          <ProfileScreen navigation={navigation} />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'nabase'}
          title='Nabase'
          selectedTitleStyle={{ color: '#3496f0' }}
          renderIcon={() => <Icon name='user' size={px2dp(22)} color='#666' />}
          renderSelectedIcon={() => <Icon name='user' size={px2dp(22)} color='#3496f0' />}
          onPress={() => this.setState({ selectedTab: 'nabase' })}
        >
          <NativeBaseScreen navigation={navigation} />
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}

const styles = StyleSheet.create({
  container    : {
    flex            : 1,
    justifyContent  : 'center',
    alignItems      : 'center',
    backgroundColor : '#F5FCFF'
  },
  welcome      : {
    fontSize  : 20,
    textAlign : 'center',
    margin    : 10
  },
  instructions : {
    textAlign    : 'center',
    color        : '#333333',
    marginBottom : 5
  }
});
